// 网址+端口号的变量
let furl = 'http://39.106.207.209:8100'

// 点击增加模态框里的取消按钮事件
function bai() {
    document.querySelector('.ul').style.display = 'none'
}
// 点击修改模态框里的取消按钮事件
function bai_i() {
    document.querySelector('.ul_i').style.display = 'none';
}

// 点击增加按钮弹出模态框
function addfamily() {
    document.querySelector('.ul').style.display = 'block';
}

// 点击查看模态框里的关闭事件
function cfm_c() {
    document.querySelector('.ul_c').style.display = 'none';
}

// 获取家人列表   
function familyList() {
    $.ajax({
        type: 'get',
        url: furl + '/family/getFamiliesAll',
        success(res) {
            // console.log(res.data);
            let str = ''
            for (let i = 0; i < res.data.length; i++) {
                str += `  
                <tr>
                    <td>${res.data[i].headimg}</td>
                    <td>${res.data[i].surname}</td>
                    <td>${res.data[i].name}</td>
                    <td>${res.data[i].gender == 1 ? '男' : '女'}</td>
                    <td>${res.data[i].birth_greg}</td>
                    <td>${res.data[i].phone}</td>
                    <td>${res.data[i].life_motto}</td>
                    <td>
                        <button onclick='udelete(${res.data[i].id})'>删除</button>
                        <button onclick='updeta(${res.data[i].id})'>修改</button>
                        <button onclick='querydeta(${res.data[i].id})'>查看</button>
                    </td>
                </tr>`
            }
            $('#tbody').html(str)
        }
    })
}
// familyList()

// 增加家人列表   
function cfm() {
    let obj = {
        surname: $('#xing').val(),
        name: $('#ming').val(),
        gender: $("input[name='gender']:checked").val(),
        birth_greg: $('#shengri').val(),
        phone: $('#dianhua').val(),
        life_motto: $('#geyan').val()
    }
    let layout = JSON.stringify(obj);
    $.ajax({
        type: 'post',
        url: furl + '/family/addFamily',
        data: layout,
        contentType: "application/json;charset=UTF-8",
        success(res) {
            getListByPage(page, pageSize)
            document.querySelector('.ul').style.display = 'none'
        }
    })
}

// 删除家人的信息
function udelete(id) {
    if (confirm('确定删除')) {
        $.ajax({
            type: 'delete',
            url: furl + '/family/deleteFamilyById/' + id,
            success(res) {
                getListByPage(page, pageSize)
            }
        })
    }
}

//点击增加按钮弹出模态框并把值渲染在弹出框里  （修改）
function updeta(id) {
    document.querySelector('.ul_i').style.display = 'block';
    $.ajax({
        type: 'get',
        url: furl + '/family/getFamilyById/' + id,
        success(res) {
            // console.log(res.data.surname);
            $('#xing_i').val(res.data.surname)
            $('#ming_i').val(res.data.name)
            $("input[name='gender_i'][value=" + res.data.gender + "]").attr("checked", true)
            $('#shengri_i').val(res.data.birth_greg)
            $('#dianhua_i').val(res.data.phone)
            $('#geyan_i').val(res.data.life_motto)
            $('#id_i').val(res.data.id)
        }
    })
}

//将修改好的数据添加到数据库  
function cfm_i() {
    let obj = {
        id: $('#id_i').val(),
        surname: $('#xing_i').val(),
        name: $('#ming_i').val(),
        gender: $("input[name='gder']:checked").val(),
        birth_greg: $('#shengri_i').val(),
        phone: $('#dianhua_i').val(),
        life_motto: $('#geyan_i').val()
    }
    let layout_i = JSON.stringify(obj);
    $.ajax({
        type: 'put',
        url: furl + '/family/updateFamily',
        data: layout_i,
        contentType: "application/json;charset=UTF-8",
        success(res) {
            getListByPage(page, pageSize)
            document.querySelector('.ul_i').style.display = 'none'
        }
    })
}

// 查询数据
function querydeta(id) {
    document.querySelector('.ul_c').style.display = 'block';
    $.ajax({
        type: 'get',
        url: furl + '/family/getFamilyById/' + id,
        success(res) {
            // console.log(res.data.name);
            $('#xing_c').val(res.data.surname)
            $('#ming_c').val(res.data.name)
            $("input[name='gender_c'][value=" + res.data.gender + "]").attr("checked", true)
            $('#shengri_c').val(res.data.birth_greg)
            $('#dianhua_c').val(res.data.phone)
            $('#geyan_c').val(res.data.life_motto)
            $('#id_c').val(res.data.id)
        }
    })
}

// 分页部分
// 点击上一页触发事件
let page = 1;
let pageSize = 6;
let total = 0; //总数
/**
 * @param1 currentPage 表示你要展示第几页
 * @param2 pageSize 表示你每页要展示几条数据
 **/
function getListByPage(currentPage, pageSize) {
    $.ajax({
        type: "get",
        url: furl + '/family/getFamiliesList/' + currentPage + '/' + pageSize,
        success: function(res) {
            // console.log(res);
            total = res.total; //切换总数
            //familyList() //调用家人列表
            let str = '';
            for (let index = 0; index < res.data.length; index++) {
                str += `<tr>
                        <td>
                            <img src="http://39.106.207.209:8100/clansman${res.data[index].headimg}" />
                        </td>
                        <td>${res.data[index].surname}</td>
                        <td>${res.data[index].name}</td>
                        <td>${res.data[index].gender}</td>
                        <td>${res.data[index].birth_greg}</td>
                        <td>${res.data[index].phone}</td>
                        <td>${res.data[index].life_motto}</td>
                        <td>
                        <button onclick='udelete(${res.data[index].id})'>删除</button>
                        <button onclick='updeta(${res.data[index].id})'>修改</button>
                        <button onclick='querydeta(${res.data[index].id})'>查看</button>
                    </td>
                    </tr>`;
            }
            $("#tbody").html(str)
                //渲染按钮
                //1.需要多少个按钮
            let len = Math.ceil(total / pageSize);
            let btn = ''
            for (let i = 0; i < len; i++) {
                btn += `<span onclick='pagenum(${i + 1})'>${i + 1}</span>`
            }
            $('.pagetion').html(btn)
        }
    })
}
getListByPage(page, pageSize)

// 下一页
function nextpage() {
    //最多可以分多少页 Math.ceil(total / 2)
    if (page < Math.ceil(total / pageSize)) {
        page++;
        getListByPage(page, pageSize)
    } else {
        alert("最后一页啦")
    }
}
// 上一页
function lastpage() {
    if (page > 1) {
        page--;
        getListByPage(page, pageSize)
    } else {
        alert("第一页啦")
    }
}
// 点击页数按钮
function pagenum(a) {
    getListByPage(a, pageSize)
}